<template>
    <div class="supply_box">
        <div :class="['head']">
            <p :class="cls">{{title}}</p>
        </div>
        <div class="list">
            <p class="ellip" @click="goInfo" v-for="item in 7">为其翁群翁群翁群翁群奥所大所为其翁群翁群翁群翁群奥所大所</p>
        </div>
        <div class="btn red" v-if="btn">{{btn}}>></div>
  </div>
</template>

<script>
export default {
  name: 'SupplyBox',
  props: {
    title: String,
    btn: String,
    cls: String,
  },
  methods:{
    goInfo(){
        alert('去详情页')
    }
  }
}
</script>

<style scoped lang="scss">
.supply_box{
    font-size: 12px;
    background-color: #ffffff;
}
.head{
    display: flex;
    align-items: center;
    padding-left: 11px;
    // width: 298px;
    width: auto;
    height: 26px;
    font-size: 13px;
    color: #333333;
    font-weight: 600;
    background: linear-gradient(0deg, #F6F6F6, #DCDCDC);
}
.gyxx{
    padding-left: 17px;
    background: url(../assets/h_gyxx.png) no-repeat;
    background-size: 13px 14px;
    background-position: 0 center;
}
.xqxx{
    padding-left: 17px;
    background: url(../assets/h_xqxx.png) no-repeat;
    background-size: 13px 14px;
    background-position: 0 center;
}
.mfxx{
    padding-left: 17px;
    background: url(../assets/h_mfxx.png) no-repeat;
    background-size: 9px 14px;
    background-position: 0 center;
}
.list{
    margin: 12px;
    line-height: 21px;
    color: #2D2D2D;
    p{
        cursor: pointer;
    }
}
.btn{
    margin: 0 12px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 11px;
}
.red{
    border: 1px solid #9D1716;
}
</style>
